.download-header
  h1
    width 40%
    float left
    margin-bottom -1rem

  ul
    margin-top 2rem
    width 40%
    float right
    text-align right

.download-header::after
  display block
  clear both
  content ""

.download-hero
  margin-bottom 1em

  ul
    display flex
    list-style none
    text-align center
    margin 0

  li
    display flex
    flex-basis 200px
    flex-grow 1

  a
    display block
    width 100%
    padding-top 1em
    color $active-green
    background $light-green

  .download-logo
    display block
    margin 0 auto
    fill $node-green

  p
    padding-bottom 1em
    margin 1em 0 0

  a:hover
    background $node-green
    color $white

    .download-logo
      fill $white

  a:active
    background $active-green
    color $white

  .download-version-toggle
    display flex
    flex-wrap nowrap

    a
      border-radius 0
      padding 5px 2px

    a:hover, a:active, a.is-version
      color $white
      background $node-green

    a.is-version
      color $light-green
      background $active-green

    .title
      font-size 1.5em
      line-height 1

    .tag
      font-size 0.8em

  .download-platform
    border-top 2px solid $node-green

.download-matrix
  margin-bottom 1.5rem

  th
    text-align left
    width 33%

  td
    border 1px solid $light-gray2

    a,
    span
      background none
      display block
      height 100%
      width 100%
      text-align center
      font-size 0.8em;

    a:hover, a:active
      background $node-green
      color $white

h5.download-table-previous-releases-header
  margin-bottom 5px

.download-table
  font-size small
  border 1px solid $light-gray2

  td
    padding 5px

  > thead
    font-weight 600

  > tbody
      td
      border-top 1px solid $light-gray2

    tr:nth-child(odd)
      background-color $light-gray3

    tr:nth-child(even)
      background-color $white

td.download-table-last
  text-align right

  > a
    padding 0 10px

@media (max-width: 700px)
  .download-hero
    ul
      display block
      text-align left

    li
      text-align center
      display block

    .download-version-toggle
      padding-right 4px
      display flex

      li
        display inline-block
        flex-basis 160px

      .tag
        font-size .6em

  .download-matrix
    display block

    th
      display block
      width 100%

    tr
      display block
      margin-bottom 1em

    td
      display block
      border 0

      a
        text-align left

  .download-table
    border 0

    > thead
      display none

    tr
      margin-bottom 10px
      display block

    td
      display block
      text-align right

    td:last-child
      border-bottom 0

    td:before
      content attr(data-label)
      float left
      font-weight 600

    > thead > tr > th,
    > tbody > tr > th,
    > tfoot > tr > th,
    > thead > tr > td,
    > tbody > tr > td,
    > tfoot > tr > td,
    > tbody td
      border none

  .download-table > tbody td
    border none

  td.download-table-last
    text-align center


@media (max-width: 320px)
  .download-hero
    .download-version-toggle
      li
        font-size 1em
      .tag
        font-size .4em
